<template>
    <div>
        <el-row :gutter="40">
            <el-col :span="6" v-for="(sd,idx) in toulist" class="jjnnxer sz" :key="idx">
                <div class="bgff boxjjnse row" @click="qiehuan(sd)">
                    <div class="boinnkjkwe">
                        <i class="dx iconmmse cz" :class="sd.icon"></i>
                    </div>
                    <div class="col tr">
                        <div class="f_b tl pr10">
                            <p class="fz16 z6 hjkjxer">
                                {{sd.title}}
                            </p>
                            <p class="fz20 z3 mt10">{{sd.number|initnumber}}</p>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="echartuioj mt40">
            <tubiao :shuju="shuju" v-if="shuju" ref="tubias"></tubiao>
        </div>
    </div>
</template>
<script>
    import tubiao from '@/components/tubiao'
    export default {
        data() {
            return {
                toulist: [{
                    icon: 'icon-Usergroup',
                    title: 'New Visits',
                    number: 102400,
                    data: [82, 93, 90, 93, 120, 130, 130],
                    datb: [42, 103, 70, 83, 140, 100, 100]
                }, {
                    icon: 'icon-xiaoxi',
                    title: 'Messages',
                    number: 81212,
                    data: [62, 103, 90, 93, 120, 130, 130],
                    datb: [42, 93, 70, 83, 140, 100, 100]
                }, {
                    icon: 'icon-renminbi',
                    title: 'Purchases',
                    number: 9280,
                    data: [52, 93, 90, 93, 120, 130, 130],
                    datb: [32, 103, 70, 83, 140, 100, 100]
                }, {
                    icon: 'icon-gouwucheman',
                    title: 'Shoppings',
                    number: 10200,
                    data: [42, 93, 90, 93, 120, 130, 130],
                    datb: [92, 103, 70, 83, 140, 100, 100]
                }],
                shuju: ''
            }
        },
        components: {
            tubiao
        },
        methods: {
            setdata(data) {
                let jhggsd = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: "#3888FA"
                            }
                        },
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    legend: {
                        data: ['expected', 'actual']
                    },
                    yAxis: {
                        axisLine: {
                            lineStyle: {
                                color: "#3888FA"
                            }
                        },
                        type: 'value'
                    },
                    grid: {
                        left: '0%',
                        right: '1%',
                        bottom: '3%',
                        containLabel: true
                    },
                    series: [{
                            name: 'expected',
                            data: data.data,
                            color: '#FF367D',
                            type: 'line',
                            smooth: true
                        },
                        {
                            name: 'actual',
                            data: data.datb,
                            color: '#3888FA',
                            type: 'line',
                            smooth: true
                        }
                    ]
                }
                return jhggsd
            },
            qiehuan(sd){
                this.$refs.tubias.setdsds(this.setdata(sd))
            }
        },
        mounted() {
            this.shuju = this.setdata(this.toulist[0])
        },
        filters: { //过滤器   页面上调用{{dt.state|lei}}
            initnumber(num) {
                var result = '',
                    counter = 0;
                num = (num || 0).toString();
                for (var i = num.length - 1; i >= 0; i--) {
                    counter++;
                    result = num.charAt(i) + result;
                    if (!(counter % 3) && i != 0) {
                        result = ',' + result;
                    }
                }
                return result
            }
        }
    }

</script>
<style scoped>
    .boxjjnse {
        box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.05);
        height: 108px;
        padding: 14px;
    }

    .boinnkjkwe {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        text-align: center;
        line-height: 80px;
    }

    .hjkjxer {
        margin-top: 15px;
    }

    .jjnnxer .iconmmse {
        color: #40C9C6;
        font-size: 38px;
    }

    .jjnnxer:nth-child(2) .iconmmse {
        color: #36A3F7;
        font-size: 42px;
    }

    .jjnnxer:nth-child(3) .iconmmse {
        color: #F4516C;
        font-size: 42px;
    }

    .jjnnxer:nth-child(4) .iconmmse {
        color: #34BFA3;
        font-size: 40px;
    }

    .jjnnxer:hover .boinnkjkwe {
        background: #40C9C6;
    }

    .jjnnxer:hover .iconmmse {
        color: #fff !important
    }

    .jjnnxer:nth-child(2):hover .boinnkjkwe {
        background: #36A3F7;
    }

    .jjnnxer:nth-child(3):hover .boinnkjkwe {
        background: #F4516C;
    }

    .jjnnxer:nth-child(4):hover .boinnkjkwe {
        background: #34BFA3;
    }

    .echartuioj {
        height: 450px;
    }

</style>
